<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色</title>
   <style>
       .box1{
           width: 100px;
           height: 100px;
           background-color: red;
           background-color: rgb(255, 0, 0);
           background-color: rgb(0, 255, 0);
           background-color: rgb(0, 0, 255);
           background-color: rgb(255, 255, 255);
           background-color: rgb(173, 173, 173);
           background-color: #ff0000;
           background-color: #00ff00;
           background-color: #0000ff;
           background-color: #ff0;
           background-color: hsl(260, 100%, 50%);
       }
       /* 颜色单位；
          在css中可以直接使用颜色名来设置各种颜色
           比如：red,orange: .yellow . . . .;
           但是在cs中直接使用颜色名是非常不方便的
               RGB值；
                 RGB通过三种颜色的不同浓度来调配出不同的颜色
                 R red  G green  B blue
                 每一种颜色的范围在0-255（0%-100%）之间
                 语法；RGB  红，绿，蓝 
                 
                RGBA:
                就是在rgb的基础上增加了一个a表示不透明度
                需要四个值，前三个和rgp一样，第三个表示不透明度
                1.表示完全不透明   0表示完全透明  .5半透明
                
                十六进制的RGB值
                语法：#红色绿色蓝色
                颜色浓度通过00-ff

                HSL值 HSLA值
                H   色相 0-360
                S   饱和度 0-100
                L   亮度   0-100
                 
                 */
               
                 
   </style>
</head>
<body>
    <div class="box1"> </div>
</body>
</html>